<template>
    <div class="app-container content_app">
      <el-row>
        <el-col :span="12">
          <p
            style="
              text-align: center;
              font-size: 24px;
              font-weight: 700;
              margin: 10px 0;
            "
          >
            損益表
          </p>
          <div>
            <p style="margin: 10px 0">
              <span> 公司名稱： </span>
              <span>永力投資有限公司</span>
            </p>
            <p style="margin: 10px 0">
              <span> 會計期間： </span>
              <span>
                <el-date-picker
                  v-model="dateArr"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="開始日期"
                  end-placeholder="結束日期"
                >
                </el-date-picker>
                <el-button
                  style="margin-left: 16px"
                  type="primary"
                  size="mini"
                  @click="getList"
                  >生成</el-button
                >
                <el-button
                  style="margin-left: 16px"
                  type="primary"
                  size="mini"
                  @click="exportExcel"
                  >導出</el-button
                >
              </span>
            </p>
            <p style="margin: 10px 0">
              <span> 單位： </span>
              <span> 港幣 </span>
            </p>
          </div>
          <el-table
            class="table_content"
            :data="tableData"
            border
            stripe
            style="width: 100%"
            :row-style="{ height: '26px' }"
          >
            <el-table-column prop="data1" label="項目"> </el-table-column>
            <el-table-column prop="data2" label="本期累計數"> </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </template>
    
    <script>
  import { getAccountIncomeStatement } from "@/api/biz/entry";
  
  export default {
    name: "incomeStatement",
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 查询參數
        queryParams: {
          startDate: this.$moment().subtract(1, "years").format("YYYY-MM-DD"),
          endDate: this.$moment().format("YYYY-MM-DD"),
        },
        dateArr: [
        this.$moment().startOf('month').format("YYYY-MM-DD"),
          this.$moment().format("YYYY-MM-DD"),
        ],
        tableData: [
          {
            data1: "一、 銷售收入",
            data2: "",
          },
          {
            data1: "減：銷售成本",
            data2: "",
          },
          {
            data1: "稅金及附加",
            data2: "",
          },
          {
            data1: "二、銷售利潤（虧損以“-”號填列）",
            data2: "",
          },
          {
            data1: "加：利息收入（虧損以“-”號填列）",
            data2: "",
          },
          {
            data1: "其他收入",
            data2: "",
          },
          {
            data1: "減：",
            data2: "",
          },
          {
            data1: "員工薪酬",
            data2: "",
          },
          {
            data1: "雇主供強積金",
            data2: "",
          },
          {
            data1: "辦公室租金",
            data2: "",
          },
          {
            data1: "辦公費用",
            data2: "",
          },
          {
            data1: "技術服務費",
            data2: "",
          },
          {
            data1: "差旅費",
            data2: "",
          },
          {
            data1: "展銷活動費",
            data2: "",
          },
          {
            data1: "審計費",
            data2: "",
          },
          {
            data1: "秘書費",
            data2: "",
          },
          {
            data1: "商業登記證書",
            data2: "",
          },
          {
            data1: "銀行費用",
            data2: "",
          },
          {
            data1: "其他費用",
            data2: "",
          },
          {
            data1: "TOTAL EXPENSES",
            data2: "",
          },
          {
            data1: "三、利潤（虧損以“-”號填列）",
            data2: "",
          },
          {
            data1: "利得稅",
            data2: "",
          },
          {
            data1: "四、淨利潤（淨虧損以“-”號填列）",
            data2: "",
          },
        ],
      };
    },
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      getList() {
        this.queryParams.startDate = this.dateArr[0];
        this.queryParams.endDate = this.dateArr[1];
        getAccountIncomeStatement(this.queryParams).then((response) => {
          console.log(response);
          let dataSet = response.data;
          this.tableData[0].data2 = dataSet.salesRevenue;
          this.tableData[1].data2 = dataSet.salesCost;
          this.tableData[2].data2 = dataSet.taxesAndSurcharges;
          this.tableData[3].data2 = dataSet.profitFromSales;
          this.tableData[4].data2 = dataSet.interestIncome;
          this.tableData[5].data2 = dataSet.otherIncome;
          this.tableData[7].data2 = dataSet.employeeFee;
          this.tableData[8].data2 = dataSet.employeeMPF;
          this.tableData[9].data2 = dataSet.officeRent;
          this.tableData[10].data2 = dataSet.officeExpenses;
          this.tableData[11].data2 = dataSet.technicalServiceFee;
          this.tableData[12].data2 = dataSet.travelExpenses;
          this.tableData[13].data2 = dataSet.esActivityFees;
          this.tableData[14].data2 = dataSet.auditFees;
          this.tableData[15].data2 = dataSet.secretaryFees;
          this.tableData[16].data2 = dataSet.busRegCert;
          this.tableData[17].data2 = dataSet.bankCosts;
          this.tableData[18].data2 = dataSet.otherFees;
          this.tableData[19].data2 = dataSet.totalExpenses;
          this.tableData[20].data2 = dataSet.profit;
          this.tableData[21].data2 = dataSet.taxesFees;
          this.tableData[22].data2 = dataSet.netLoss;
        });
      },
      exportExcel() {
      this.download_get(
        "biz/entry/accounting/incomeStatement/export",
        {
          ...this.queryParams,
        },
        `損益表_${new Date().getTime()}.xlsx`
      );
    },
    },
  };
  </script>
    <style scoped lang="scss">
  ::v-deep .table_content {
    th {
      padding: 0 !important;
      height: 10px;
      line-height: 10px;
    }
    td {
      padding: 0 !important;
      height: 30px;
      line-height: 30px;
    }
  }
  </style>
    